<template>
  <div class="bid-management-wrapper">
    <List>
      <ListItem v-for="bid in bidGoodsList.data" :key="bid.id">
        <bid-item :bidData="bid" />
        <template slot="action">
          <li>
            <a href="#" @click="showModal(bid)" :disabled="bid.bid_count?false:true">竞价列表({{bid.bid_count}})</a>
          </li>
          <li>
            <a href="#" @click="showConfirmModal(bid.id,bid.title)" style="color: #e74c3c">删除</a>
          </li>
        </template>
      </ListItem>
    </List>

    <Modal
      v-model="bidModal"
      title="竞价列表"
      width="450"
      :styles="{top: '300px'}"
      :mask-closable="false"
    >
      <List>
        <ListItem v-for="bid in bidData.bid" :key="bid.id">
          <ListItemMeta>
            <template slot="title">
              {{bid.user.nickname}}
              <Tag color="gold" v-if="bidData.winner_id == bid.user.id">赢家</Tag>
            </template>
            <template slot="avatar">
              <img :src="bid.user.avatar" style="width: 70px;border-radius: 50%" />
            </template>
            <template slot="description">
              金额：
              <span style="color: #c0392b;">￥{{bid.price}}</span>
              <br />
              时间：
               <Time :time="bid.bid_time" />
            </template>
          </ListItemMeta>
        </ListItem>
      </List>
    </Modal>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";
import _ from "lodash";

export default {
  mixins: [getBasicInfo],
  components: {
    bidItem: () => import("@/components/Bid_Management_Item")
  },
  data() {
    return {
      bidGoodsList: [],
      bidData: {},
      bidModal: false
    };
  },
  mounted() {
    this.fetchBidGoods();
  },
  methods: {
    fetchBidGoods() {
      this.axios.get(`/api/bid_goods?craftsman=${this.getCid}`).then(res => {
        this.bidGoodsList = res.data;
      });
    },
    contentCut: text => _.truncate(text, { length: 45 }),
    showConfirmModal(id, title) {
      this.$Modal.confirm({
        title: "删除帖子",
        content: `您确定要删除您的拍卖品 <strong> ${title} </strong>吗？`,
        onOk: () => {
          this.axios.delete(`/api/bid_goods/${id}`).then(res => {
            this.fetchBidGoods();
            this.$Message.success("删除成功");
          });
        }
      });
    },
    showModal(bid) {
      this.bidData = bid;
      this.bidModal = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.bid-management-wrapper {
  width: 100%;
}
</style>